<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--
        用户操作元素
            1. input 输入元素 : 除单选按钮和多选按钮以为的其它格式的 input 操作元素
                               不论type的取值类型如何，页面呈现效果如何，页面操作方式如何，
                               都具有相同的操作特性和功能
                                    - name 提供参数名
                                    - value 提供默认值
                                    - 都接收用户的输入操作
                               可能存在基于操作元素的小范围变化
            2. input:radio 单选元素
            3. input:checkbox 多选元素
            4. select + option 选择列表元素
            5. textarea 多行文本域元素
    -->
    <!-- 普通的 input 输入元素 -->
    <ul>
        <li>
            文本输入框 ：<input type="text" name="username">
        </li>
        <li>
            <!-- 隐藏用户的输入值，以原点的方式替换 -->
            密码输入框 ：<input type="password" name="password">
        </li>
        <li>
            <!-- value 默认值只能是数值 -->
            数值输入框 ：<input type="number" name="num" value="111">
        </li>
        <li>
            <!-- value 默认值只能是HEX颜色码 -->
            颜色输入框 ：<input type="color" name="color" value="#00ff00">
        </li>
        <li>
            <!--
                min 滑块的最小值 ， 默认值为 0
                max 滑块的最大值 ， 默认值为 100
                step 滑块步长 ， 默认值为 1
                value 的有效值  [min,max]
            -->
            范围滑块 ：<input type="range" name="num1" min="10" max="20" value="15"> <br>
            等同与number ：<input type="number" name="num" min="10" max="20" step="2">
        </li>
        <li>
            <!--
                隐藏输入框在页面中不会显示，但具有表单提交时的数据传递功能
                所以隐藏输入框常使用value属性定义隐藏默认数据，进行表单数据传递
            -->
            隐藏输入框 ：<input type="hidden" name="hidden" value="隐藏值">
        </li>
        <li>
            <!--
                一些操作元素，在不同的系统和浏览器上的呈现效果不同
                操作元素如果是使用内置选择器模式提供数据操作的，其默认模式并不一定符合不同地域的操作习惯
            -->
            日期输入框 ：<input type="date" name="date"> <br>
            时间输入框 ：<input type="time" name="time">
        </li>
    </ul>
    <hr>
    <h4>单选按钮</h4>
    <!--
        单选按钮在项目中基本不会单一存在，都是以组别的方式构建选择功能
            + 单选按钮的组别形成 是通过 同名 name实现
            + 同组单选按钮之间会形成选择互斥
            + 单选按钮完成用户选择行为记录时，必须为每一个单选按钮都提供 value 属性值，
              该值用于选中时的数据描述，同时提供选中时的参数取值，如果未提供只记录选中状态 on
            + 如果单选按钮需要提供默认值，以布尔属性 checked 定义默认单选按钮选项
              同组单选按钮如果定义了多个checked ，只有最后一个会呈现选中效果
              【html的代码是由上而下，由左而由进行解析加载的】
    -->
    <form action="">
        <span>性别：</span>
        <input type="radio" name="sex" value="m">男
        <input type="radio" name="sex" value="f">女
        <input type="radio" name="sex" value="u" checked>保密
        <br>
        <input type="submit" value="提交">
    </form>
    <br>

    <h4>多选按钮</h4>
    <!--
       多选按钮以组别的方式构建数据分组功能
           + 多选按钮的组别形成 是通过 同名 name实现
           + 多选按钮完成用户选择行为记录时，必须为每一个多选按钮都提供 value 属性值，
             该值用于选中时的数据描述，同时提供选中时的参数取值，如果未提供只记录选中状态 on
           + 如果多选按钮需要提供默认值，以布尔属性 checked 定义默认checked选按钮选项
             同组单选按钮如果定义了多个checked ，也会呈现多个选中效果
        多选按钮的应用：
            1. 状态场景 ： 通过一个多选按钮，描述用户是否同意的状态
            2. 数据场景 ： 在一组数据中选中多个或者不选
   -->
    <form>
        <span>技术：</span>
        <input type="checkbox" name="skill" value="java"> java
        <input type="checkbox" name="skill" value="html" checked> html
        <input type="checkbox" name="skill" value="oracle"> oracle
        <input type="checkbox" name="skill" value="css" checked> css
        <input type="checkbox" name="skill" value="js"> js
        <br>
        <input type="submit" value="提交">
    </form>
    <hr>
    <h4>下拉列表</h4>
    <form action="">
        <!--
            表单操作元素 是 select
                => 下拉列表下拉选项元素 option
            通过 对 select 标签添加 name 属性构成数据提交支持
                => select 提交的是被选中的 option 标签
                   当 option 标签定义了 value 属性时，取值为value值
                   当 option 标签未定义 value 属性时，取值未标签内容
                => 通过在select内容的第一行定义特殊 option 实现页面的提示选择效果和判断依据
                => 如果下拉列表需要提供默认选中效果，为对应的 option 定义布尔属性 selected 描述选中
            因为 option 是作为 select 的选项标签使用，且标签内容在无value时充当提交数据，
            所以option的内容只能是文本，所以定义在option中的标签会被删除
        -->
        <select name="arg">
            <option value="-1">----请选择----</option>
            <option>选项A</option>
            <option>选项B</option>
            <option value="C" selected>选项C</option>
            <option value="D">选项D</option>
            <option value="E">
                <p>选项E</p>
            </option>
        </select>
        <input type="submit" value="提交">
    </form>
    <br>
    <!--将选项分组-->
    <select name="arga">
        <optgroup label="分组名A">
            <option value="A">选项A</option>
            <option value="B">选项B</option>
            <option value="C">选项C</option>
        </optgroup>
        <optgroup label="分组名B">
            <option value="D">选项D</option>
            <option value="E">选项E</option>
        </optgroup>
    </select>
    <br><br>
    <!--
        构建多选下拉列表 : 使用方式 ctrl+鼠标点击 => 因为操作复杂性，项目中基本不用
        多选下拉列表基本使用 二次定义的 功能标签 => select2 - 级联选择器
    -->
    <select name="argb" multiple>
        <optgroup label="分组名A">
            <option value="A">选项A</option>
            <option value="B">选项B</option>
            <option value="C">选项C</option>
        </optgroup>
        <optgroup label="分组名B">
            <option value="D">选项D</option>
            <option value="E">选项E</option>
        </optgroup>
    </select>

    <h4>多行文本域(框)</h4>
    <textarea name="text" cols="30" rows="10"></textarea>
    <br>
    <!--
        多行文本框的标签内容为默认值定义区域，规则是普通文本规则，而非标签结构规则
        也就是写什么就呈现什么
        如果文章内容需要呈现除 文本意外的资源，基本都会使用 富文本框 js 插件
    -->
    <textarea name="text" cols="30" rows="10">默认值
          默认值
        <p>标签</p>
    </textarea>

    <hr>
<!--    <div style="border: 1px solid black;">-->
<!--        a-->
<!--    </div>-->
<!--    <br>-->
<!-- contenteditable 开启任意标签的编辑功能 -->
    <div contenteditable style="border: 1px solid black;">
        a
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>








